<template>
  <backContainer>
    <card v-loading="loading" title="成绩详情">
      <div class="all_content">
        <div class="student_sign">
          <div class="student_name">
            {{ gradesDetial.studentName }}（{{ gradesDetial.studentNum }}）
          </div>
          <div class="student_info">
            <div class="info_item">
              班级：{{ gradesDetial.className }}({{
                gradesDetial.branchName
              }}--{{ gradesDetial.majorName }})
            </div>
            <div class="info_item">课程：{{ gradesDetial.courseName }}</div>
            <div class="info_item">
              班级平均成绩：{{ gradesDetial.avgScore }}
            </div>
          </div>
        </div>
        <div class="scroll_box">
          <div class="daily_score">
            <div class="title">教师评价</div>
            <div class="teacherEvaluations flexBet">
              <div class="bottom_content_right">
                <div class="turn_total">
                  <i
                    @click="turnLeft"
                    class="el-icon-d-arrow-left"
                    :class="{ prohibited: nowIndex == 0 }"
                  ></i>
                  <div class="text">{{ nowStuEvaluateName }}</div>
                  <i
                    @click="turnRight"
                    class="el-icon-d-arrow-right"
                    :class="{
                      prohibited: stuEvaluateList.length - 1 == nowIndex,
                    }"
                  ></i>
                </div>
                <div class="creditDetails" ref="creditDetailsRef"></div>
              </div>
              <div class="evaluateCopywriting">xxxxxxxxxxxxxx</div>
            </div>
          </div>
          <div class="daily_score">
            <div class="title">总评</div>
            <div>
              <el-table
                :data="distributionList"
                v-loading="loading"
                border
                style="width: 100%"
              >
                <el-table-column
                  align="center"
                  prop="dailyScoreTotal"
                  :label="`课堂表现分(${gradesDetial.usualScorePercentage}%)`"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="processExamScoreTotal"
                  :label="`过程性考核(${gradesDetial.processScorePercentage}%)`"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="finishExamScoreTotal"
                  :label="`终结性考核(${gradesDetial.examScorePercentage}%)`"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="scoreTotal"
                  label="总分"
                ></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="daily_score_detail">
            <div class="title">明细</div>
            <div class="flex_center">
              <div class="text">课堂表现分</div>
              <div class="table_box">
                <el-table
                  :data="dailyScoreList"
                  v-loading="loading"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    align="center"
                    prop="score"
                    label="打分"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="teacherName"
                    label="打分教师"
                  ></el-table-column>
                  <el-table-column align="center" label="打分时间">
                    <template slot-scope="scope">
                      <div>
                        {{ parseTime(scope.row.operateTime) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="remark"
                    label="打分备注"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.remark ? scope.row.remark : "--" }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="flex_center">
              <div class="text">过程性考核</div>
              <div class="table_box">
                <el-table
                  :data="processExamScore"
                  v-loading="loading"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    align="center"
                    prop="ancestorsName"
                    label="任务名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="indexName"
                    label="考核内容"
                  ></el-table-column>
                  <el-table-column align="center" label="占比(%)">
                    <template slot-scope="scope">
                      <div>{{ scope.row.scorePercentage }}%</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center">
                    <template #header>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        得分
                        <el-tooltip class="item" effect="dark" placement="top">
                          <i
                            class="el-icon-question shou"
                            style="
                              font-size: 16px;
                              vertical-align: middle;
                              margin-left: 5px;
                            "
                          ></i>
                          <div slot="content">
                            <div>"99"：该步骤考核的成绩</div>
                            <div>"--"：学生暂未参与该步骤考核</div>
                          </div>
                        </el-tooltip>
                      </div>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.score ? scope.row.score : "--" }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="flex_center">
              <div class="text">终结性考核</div>
              <div class="table_box">
                <el-table
                  :data="finishExamScore"
                  v-loading="loading"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    align="center"
                    prop="ancestorsName"
                    label="任务名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="name"
                    label="考核内容"
                  ></el-table-column>
                  <el-table-column align="center" label="占比(%)">
                    <template slot-scope="scope">
                      <div>{{ scope.row.scorePercentage }}%</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="得分">
                    <template #header>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        得分
                        <el-tooltip class="item" effect="dark" placement="top">
                          <i
                            class="el-icon-question shou"
                            style="
                              font-size: 16px;
                              vertical-align: middle;
                              margin-left: 5px;
                            "
                          ></i>
                          <div slot="content">
                            <div>"99"：该步骤考核的成绩</div>
                            <div>"--"：学生暂未参与该步骤考核</div>
                          </div>
                        </el-tooltip>
                      </div>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.score ? scope.row.score : "--" }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_btns">
        <el-button
          type="primary"
          v-preventReClick
          @click="getLastOne"
          v-if="showLast"
          >上一份</el-button
        >
        <el-button
          type="primary"
          v-preventReClick
          @click="getNextOne"
          v-if="showNext"
          >下一份</el-button
        >
      </div>
    </card>
  </backContainer>
</template>

<script>
import * as echarts from "echarts";
import {
  getStudentEvaluateList,
  getRadarData,
} from "@/api/mine/mine";
import { gradesInfo, gradesList } from "@/api/statistics/statistics";
export default {
  data() {
    return {
      stuIndex: 0,
      loading: false,
      showLast: true,
      showNext: true,
      studentList: [],
      courseStuId: this.$route.query.courseStuId,
      distributionList: [
        {
          processExamScoreTotal: 0,
          finishExamScoreTotal: 0,
          dailyScoreTotal: 0,
          scoreTotal: 0,
        },
      ],
      gradesDetial: {},
      processExamScore: [],
      finishExamScore: [],
      dailyScoreList: [],

      classFinishTaskCountData: [],
      studentFinishTaskCountData: [],
      stuEvaluateList: [],
      nowStuEvaluateName: "",
      nowStuEvaluateId: "",
      dateList: [],
      classAllCredit: 0,
      stuAllCredit: 0,
      nowIndex: 0,
      studyData: {},
      courseData: [],
      indicator: [],
      dataValue: [],
      model: {
        semesterId: "",
        type: "",
      },
    };
  },
  watch: {
    stuIndex: {
      handler(val) {
        this.showLast = val != 0;
        this.showNext = val != this.studentList.length - 1;
      },
      immediate: true,
    },
  },
  created() {
    this.gradesInfo();
    this.getList();
    this.getStudentEvaluateList();
  },
  methods: {
    async getStudentEvaluateList() {
      let params = {
        schoolId: this.$store.getters.schoolId,
      };
      console.log(params);
      let res = await getStudentEvaluateList(params);
      const { code, data } = res;
      if (code == 200) {
        this.stuEvaluateList = data;
        this.nowStuEvaluateName = data[0].name;
        this.nowStuEvaluateId = data[0].id;
        this.nowIndex = 0;
        this.getRadarData(this.nowStuEvaluateId);
      }
    },
    turnLeft() {
      if (this.nowIndex == 0) {
        return;
      }
      this.nowIndex--;
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name;
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id;
      this.getRadarData(this.nowStuEvaluateId);
    },
    turnRight() {
      if (this.nowIndex == this.stuEvaluateList.length - 1) {
        return;
      }
      this.nowIndex++;
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name;
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id;
      this.getRadarData(this.nowStuEvaluateId);
    },
    async getRadarData(id) {
      let res = await getRadarData(id);
      const { code, data } = res;
      if (code == 200) {
        if (data && data.length > 0) {
          let arr = [];
          let dataValue = [];
          data.forEach((value) => {
            let obj = {
              text: value.name,
              max: 110,
            };
            dataValue.push(value.studentScore);
            arr.push(obj);
          });
          this.indicator = arr;
          this.dataValue = dataValue;
        }
      }
      this.setCreditOption();
    },
    setCreditOption() {
      let myChart = echarts.init(this.$refs.creditDetailsRef);
      let option;
      option = {
        color: ["#2754F3", "#28B28B"],
        tooltip: {
          trigger: "axis",
        },
        radar: [
          {
            indicator: this.indicator,
            center: ["50%", "50%"],
            radius: 100,
          },
        ],
        series: [
          {
            type: "radar",
            symbolSize: 0,
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value: this.dataValue,
                name: this.nowStuEvaluateName,
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  color: "rgba(39, 84, 243, 0.2)",
                },
              },
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              },
              color: "#2754F3",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getLastOne() {
      this.stuIndex--;
      this.courseStuId = this.studentList[this.stuIndex].ccCourseStuId;
      this.gradesInfo();
    },
    getNextOne() {
      this.stuIndex++;
      this.courseStuId = this.studentList[this.stuIndex].ccCourseStuId;
      this.gradesInfo();
    },
    //获取学生列表
    async getList() {
      let params = {
        pageNum: 1,
        pageSize: 9999,
      };
      let res = await gradesList(params);
      const { rows, code } = res;
      if (code == 200) {
        this.studentList = rows;
        rows.forEach((value, index) => {
          if (value.ccCourseStuId == this.$route.query.courseStuId) {
            this.stuIndex = index;
            console.log(this.stuIndex);
          }
        });
      }
    },
    async gradesInfo() {
      this.loading = true;
      let params = {
        courseStuId: this.courseStuId,
      };
      let res = await gradesInfo(params);
      const { code, data } = res;
      if (code == 200) {
        this.loading = false;
        this.gradesDetial = data;
        //过程型考核
        this.processExamScore = data.progressScoreList;
        //终结性考核
        this.finishExamScore = data.examScoreList;
        this.dailyScoreList = data.usualScoreList;
        this.distributionList[0].processExamScoreTotal =
          data.processScore.toFixed(1);
        this.distributionList[0].finishExamScoreTotal =
          data.examScore.toFixed(1);
        this.distributionList[0].dailyScoreTotal = data.usualScore.toFixed(1);
        this.distributionList[0].scoreTotal = data.totalScore.toFixed(1);
      } else {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.evaluateCopywriting {
  width: 715px;
  height: 350px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #ebebeb;
  padding: 32px;
  box-sizing: border-box;
}
.bottom_content {
  display: flex;
  align-items: center;
  margin-top: 16px;

  &_right {
    width: 400px;
    height: 350px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #ebebeb;
    padding: 32px;
    box-sizing: border-box;
    .turn_total {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon-d-arrow-left,
      .el-icon-d-arrow-right {
        color: #28b28b;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
      }
      .text {
        font-size: 16px;
        margin: 0 20px;
      }
    }
    .creditDetails {
      width: 100%;
      height: 300px;
    }
  }
}
.all_content {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  .student_sign {
    width: 100%;
    .student_name {
      width: 100%;
      color: #333333;
      font-weight: bold;
      font-size: 16px;
    }
    .student_info {
      display: flex;
      align-items: center;
      margin: 20px 0;
      .info_item {
        margin-right: 20px;
        color: #999999;
        font-size: 14px;
      }
    }
  }
  .scroll_box {
    height: calc(100vh - 360px);
    overflow: auto;
    width: 100%;
    .daily_score {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
    .daily_score_detail {
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 350px;
      overflow: auto;
      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .flex_center {
        display: flex;
        align-items: center;

        .text {
          width: 120px;
          height: 100%;
          background: #e5edee;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #dfe6ec;
          border-right: 0;
          border-bottom: 0;
        }
        .table_box {
          flex: 1;
          .total_center {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 43px;
            align-items: center;
            border: 1px solid #e6ebf5;
            border-top: 0;
            color: #606266;
            font-size: 14px;
          }
          .total_center:hover {
            background: #f5f7fa;
          }
        }
      }
    }
  }
}
.footer_btns {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}
</style>
